<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <link rel="stylesheet" href="./style.css">
</head>

<body>

      <div class="container">
            <p>猜你喜欢</p>
            <div class="content" id="content">
                  <div class="box">
                        <img src="https://img.zcool.cn/community/015e1b5add3a03a80120927bf94f02.jpeg@260w_195h_1c_1e_1o_100sh.jpg" alt="">
                        <div class="title">
                              儿童插画水彩画-划船
                        </div>
                  </div>
            </div>
      </div>

      <script>
            // 已经有数据;
            var jsonString = '{"code":0,"msg":"success","data":{"contents":[{"id":6846048,"objectType":3,"objectTypeStr":"作品","title":"儿童插画水彩画-划船","cover":"https://img.zcool.cn/community/015e1b5add3a03a80120927bf94f02.jpeg","cover1x":"https://img.zcool.cn/community/015e1b5add3a03a80120927bf94f02.jpeg@260w_195h_1c_1e_1o_100sh.jpg","cover2x":"https://img.zcool.cn/community/015e1b5add3a03a80120927bf94f02.jpeg@520w_390h_1c_1e_1o_100sh.jpg","pageUrl":"https://www.zcool.com.cn/work/ZMjczODQxOTI\u003d.html","type":1,"typeStr":"原创","cateStr":"插画","subCateStr":"绘本","publishTime":"Apr 23, 2018 9:51:17 AM","publishTimeDiffStr":"1年前","timeTitleStr":"审核通过时间：2018-04-23 09:51:17；创建时间：2018-04-23 09:41:28","designTime":"Apr 23, 2018 9:42:35 AM","recommend":2,"recommendTime":"Apr 23, 2018 11:20:25 AM","status":1,"viewCount":2534,"commentCount":1,"favoriteCount":0,"recommendCount":34,"contentCount":0,"contentCountStr":"0","viewCountStr":"2534","commentCountStr":"1","favoriteCountStr":"0","recommendCountStr":"34","favoriteStatus":0,"creator":423173,"creatorObj":{"id":423173,"status":1,"username":"画儿晴天","pageUrl":"https://huitu.zcool.com.cn","avatar":"https://img.zcool.cn/community/0407ea553faab600000140270214ea.jpg","avatar1x":"https://img.zcool.cn/community/0407ea553faab600000140270214ea.jpg@80w_80h_1c_1e_1o_100sh.jpg","avatar2x":"https://img.zcool.cn/community/0407ea553faab600000140270214ea.jpg@160w_160h_1c_1e_1o_100sh.jpg","memberType":0},"eventId":0,"cate":1,"subCate":806,"createTime":"Apr 23, 2018 9:41:28 AM","trackCode":"2","personCount":0},{"id":8610658,"objectType":3,"objectTypeStr":"作品","title":"彩铅 绘本 插画《丑公主》","cover":"https://img.zcool.cn/community/03168dd5c95b27aa8012141687f2c2c.jpg","cover1x":"https://img.zcool.cn/community/03168dd5c95b27aa8012141687f2c2c.jpg@260w_195h_1c_1e_1o_100sh.jpg","cover2x":"https://img.zcool.cn/community/03168dd5c95b27aa8012141687f2c2c.jpg@520w_390h_1c_1e_1o_100sh.jpg","pageUrl":"https://www.zcool.com.cn/work/ZMzQ0NDI2MzI\u003d.html","type":1,"typeStr":"原创","cateStr":"插画","subCateStr":"绘本","publishTime":"Mar 23, 2019 2:36:48 PM","publishTimeDiffStr":"135天前","timeTitleStr":"审核通过时间：2019-03-23 14:36:48；创建时间：2019-03-23 13:13:49","designTime":"Mar 23, 2019 1:13:49 PM","recommend":2,"recommendTime":"Mar 24, 2019 10:08:20 PM","status":1,"viewCount":683,"commentCount":2,"favoriteCount":0,"recommendCount":21,"contentCount":0,"contentCountStr":"0","viewCountStr":"683","commentCountStr":"2","favoriteCountStr":"0","recommendCountStr":"21","favoriteStatus":0,"creator":457151,"creatorObj":{"id":457151,"status":1,"username":"小亚小怪","pageUrl":"https://www.zcool.com.cn/u/457151","avatar":"https://img.zcool.cn/community/01f6325c123573a80121ab5dcaffef.jpg","avatar1x":"https://img.zcool.cn/community/01f6325c123573a80121ab5dcaffef.jpg@80w_80h_1c_1e_1o_100sh.jpg","avatar2x":"https://img.zcool.cn/community/01f6325c123573a80121ab5dcaffef.jpg@160w_160h_1c_1e_1o_100sh.jpg","memberType":0},"eventId":0,"cate":1,"subCate":806,"createTime":"Mar 23, 2019 1:13:49 PM","trackCode":"2","personCount":0},{"id":9367826,"objectType":3,"objectTypeStr":"作品","title":"无题","cover":"https://img.zcool.cn/community/031d9d25d2a9d98a80120b5abf9512a.jpg","cover1x":"https://img.zcool.cn/community/031d9d25d2a9d98a80120b5abf9512a.jpg@260w_195h_1c_1e_1o_100sh.jpg","cover2x":"https://img.zcool.cn/community/031d9d25d2a9d98a80120b5abf9512a.jpg@520w_390h_1c_1e_1o_100sh.jpg","pageUrl":"https://www.zcool.com.cn/work/ZMzc0NzEzMDQ\u003d.html","type":1,"typeStr":"原创","cateStr":"摄影","subCateStr":"人像","publishTime":"Jul 14, 2019 1:09:12 PM","publishTimeDiffStr":"22天前","timeTitleStr":"审核通过时间：2019-07-14 13:09:12；创建时间：2019-07-11 14:53:10","designTime":"Jul 11, 2019 2:53:10 PM","recommend":2,"recommendTime":"Jul 15, 2019 11:37:24 AM","status":1,"viewCount":8624,"commentCount":29,"favoriteCount":0,"recommendCount":119,"contentCount":0,"contentCountStr":"0","viewCountStr":"8624","commentCountStr":"29","favoriteCountStr":"0","recommendCountStr":"119","favoriteStatus":0,"creator":204453,"creatorObj":{"id":204453,"status":1,"username":"rodman66","pageUrl":"https://www.zcool.com.cn/u/204453","avatar":"https://img.zcool.cn/community/031a6335b309844a80121b9941c3e01.jpg","avatar1x":"https://img.zcool.cn/community/031a6335b309844a80121b9941c3e01.jpg@80w_80h_1c_1e_1o_100sh.jpg","avatar2x":"https://img.zcool.cn/community/031a6335b309844a80121b9941c3e01.jpg@160w_160h_1c_1e_1o_100sh.jpg","memberType":0},"eventId":0,"cate":33,"subCate":34,"createTime":"Jul 11, 2019 2:53:10 PM","trackCode":"2","personCount":0},{"id":7041505,"objectType":3,"objectTypeStr":"作品","title":"彩铅猫咪","cover":"https://img.zcool.cn/community/031c75d5b123254a801212d5761a10d.jpg","cover1x":"https://img.zcool.cn/community/031c75d5b123254a801212d5761a10d.jpg@260w_195h_1c_1e_1o_100sh.jpg","cover2x":"https://img.zcool.cn/community/031c75d5b123254a801212d5761a10d.jpg@520w_390h_1c_1e_1o_100sh.jpg","pageUrl":"https://www.zcool.com.cn/work/ZMjgxNjYwMjA\u003d.html","type":1,"typeStr":"原创","cateStr":"纯艺术","subCateStr":"彩铅","publishTime":"Jun 2, 2018 2:18:04 PM","publishTimeDiffStr":"1年前","timeTitleStr":"审核通过时间：2018-06-02 14:18:04；创建时间：2018-06-02 13:59:43","designTime":"Jun 2, 2018 1:59:43 PM","recommend":2,"recommendTime":"Jun 3, 2018 12:02:47 PM","status":1,"viewCount":3585,"commentCount":5,"favoriteCount":0,"recommendCount":109,"contentCount":0,"contentCountStr":"0","viewCountStr":"3585","commentCountStr":"5","favoriteCountStr":"0","recommendCountStr":"109","favoriteStatus":0,"creator":14639356,"creatorObj":{"id":14639356,"status":1,"username":"浩轩圆珠笔画","pageUrl":"https://www.zcool.com.cn/u/14639356","avatar":"https://img.zcool.cn/community/0417aa5772b3ea6ac72573f3d7a93c.jpg","avatar1x":"https://img.zcool.cn/community/0417aa5772b3ea6ac72573f3d7a93c.jpg@80w_80h_1c_1e_1o_100sh.jpg","avatar2x":"https://img.zcool.cn/community/0417aa5772b3ea6ac72573f3d7a93c.jpg@160w_160h_1c_1e_1o_100sh.jpg","memberType":0},"eventId":0,"cate":612,"subCate":661,"createTime":"Jun 2, 2018 1:59:43 PM","trackCode":"2","personCount":0},{"id":5655446,"objectType":3,"objectTypeStr":"作品","title":"水彩花卉","cover":"https://img.zcool.cn/community/008e9659570d0ca8012193a3497413.jpg","cover1x":"https://img.zcool.cn/community/008e9659570d0ca8012193a3497413.jpg@260w_195h_1c_1e_1o_100sh.jpg","cover2x":"https://img.zcool.cn/community/008e9659570d0ca8012193a3497413.jpg@520w_390h_1c_1e_1o_100sh.jpg","pageUrl":"https://www.zcool.com.cn/work/ZMjI2MjE3ODQ\u003d.html","type":1,"typeStr":"原创","cateStr":"插画","subCateStr":"商业插画","publishTime":"Jul 1, 2017 10:46:53 AM","publishTimeDiffStr":"2年前","timeTitleStr":"审核通过时间：2017-07-01 10:46:53；创建时间：2017-07-01 10:46:53","designTime":"Jul 1, 2017 10:46:53 AM","recommend":2,"recommendTime":"Jul 1, 2017 11:27:33 AM","status":1,"viewCount":3311,"commentCount":1,"favoriteCount":0,"recommendCount":41,"contentCount":0,"contentCountStr":"0","viewCountStr":"3311","commentCountStr":"1","favoriteCountStr":"0","recommendCountStr":"41","favoriteStatus":0,"creator":554565,"creatorObj":{"id":554565,"status":1,"username":"董搞搞","pageUrl":"https://www.zcool.com.cn/u/554565","avatar":"https://img.zcool.cn/community/01c0705b6a639aa801206a355d1d71.jpeg","avatar1x":"https://img.zcool.cn/community/01c0705b6a639aa801206a355d1d71.jpeg@80w_80h_1c_1e_1o_100sh.jpg","avatar2x":"https://img.zcool.cn/community/01c0705b6a639aa801206a355d1d71.jpeg@160w_160h_1c_1e_1o_100sh.jpg","memberType":0},"eventId":0,"cate":1,"subCate":2,"createTime":"Jul 1, 2017 10:46:53 AM","trackCode":"2","personCount":0}],"day":"2018-12-04"}}';
            // 循环十次 => 主动重复拼接;
            // 根据数据被动进行拼接 => 数据有多少拼接多少次;
            var jsonObject = eval("("+ jsonString +")");
            var list = jsonObject.data.contents;
            // 字符串拼接方案 : 
            var html = ""
            for(var i = 0 ; i < list.length ; i ++){
                  // console.log(list[i].title,list[i].cover1x);
                  html += '  <div class="box">'+
                                    '<img src="'+ list[i].cover1x +'" alt="">'+
                                    '<div class="title">' + list[i].title + '</div>'+
                              '</div>'
            }
            content.innerHTML = html;

      </script>
</body>

</html>